<template>
	<view class="nearby-user-li">

		<view class="nearby-user-li-content">
			<view class="nearby-user-li-left">
				<userAvatar radius="50%" :src="data?.avatar" :size="70">
				</userAvatar>
			</view>
			<view class="nearby-user-li-right">
				<userName fontSize="25rpx" :username="data.nickname" :gender="data.gender">
				</userName>
				<text class="user-introduce">{{data.introduce}}</text>
				<view class="trends-list">
					<view class="trends-list-li" v-for="item in 4">
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue'
	import TimeAgoDiff from '@/utool/TimeAgoDiff';
	import useUserStore from '@/stores/store/user.js'
	const userStore = useUserStore()
	const userInfo = userStore.userInfo
	import userName from '@/components/user_name_text/user_name_text.vue';
	import userAvatar from "@/components/user_avatar/user_avatar.vue"
	defineProps(["data"])
</script>

<style lang="scss" scoped>
	.nearby-user-li {
		padding: 0rpx 25rpx;
	}

	.nearby-user-li-content {
		padding: 28rpx 0rpx;
		padding-bottom: 35rpx;
		display: flex;
		gap: 25rpx;
		border-bottom: 1rpx solid #f1eeee;
	}

	.nearby-user-li-left {
		padding-top: 8rpx;
	}

	.nearby-user-li-right {
		display: flex;
		flex-direction: column;
	}

	.user-introduce {
		margin-top: 10rpx;
		font-size: 20rpx;
		color: grey;
	}

	.trends-list {
		display: flex;
		gap: 15rpx;
		margin-top: 20rpx;
	}

	.trends-list-li {
		width: 140rpx;
		height: 140rpx;
		background: gray;
		border-radius: 15rpx;
	}
</style>